<template>
  <div>
    <div type="flex" justify="space-around" class="table_content">
      <div class="table-item">
        <div class="table-header">子公司销售前十</div>
        <el-table :data="companySallList.data" style="width: 100%">
          <el-table-column label="排名" width="50">
            <template slot-scope="{ $index }">{{ $index + 1 }}</template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="sale_count" label="开卡数量" min-width="200">
            <template slot-scope="scope">
              <div class="rank">
                <div
                  class="num"
                  :style="{ width: setWidth(companySallList.max) }"
                >
                  {{ scope.row.sale_count }}
                </div>
                <div class="program-content">
                  <div
                    class="box"
                    :style="{
                      width: setWidthPersent(
                        scope.row.sale_count,
                        companySallList.max
                      )
                    }"
                  >
                    <div class="program"></div>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="table-item">
        <div class="table-header">子公司首充前十</div>
        <el-table
          :data="companyChargeList.data"
          style="width: 100%;margin-left: 12px;"
        >
          <el-table-column label="排名" width="50">
            <template slot-scope="{ $index }">{{ $index + 1 }}</template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column
            prop="sale_save_count"
            label="首充数量"
            min-width="200"
          >
            <template slot-scope="scope">
              <div class="rank">
                <div
                  class="num"
                  :style="{ width: setWidth(companyChargeList.max) }"
                >
                  {{ scope.row.sale_save_count }}
                </div>
                <div class="program-content">
                  <div
                    class="box"
                    :style="{
                      width: setWidthPersent(
                        scope.row.sale_save_count,
                        companyChargeList.max
                      )
                    }"
                  >
                    <div class="program1"></div>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div type="flex" justify="space-around" class="table_content">
      <div class="table-item">
        <div class="table-header">业务人员销售前十</div>
        <el-table :data="personSallList.data" style="width: 100%">
          <el-table-column label="排名" width="50">
            <template slot-scope="{ $index }">{{ $index + 1 }}</template>
          </el-table-column>
          <el-table-column prop="real_name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="sale_count" label="开卡数量" min-width="200">
            <template slot-scope="scope">
              <div class="rank">
                <div
                  class="num"
                  :style="{ width: setWidth(personSallList.max) }"
                >
                  {{ scope.row.sale_count }}
                </div>
                <div class="program-content">
                  <div
                    class="box"
                    :style="{
                      width: setWidthPersent(
                        scope.row.sale_count,
                        personSallList.max
                      )
                    }"
                  >
                    <div class="program"></div>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="table-item">
        <div class="table-header">业务人员首充前十</div>
        <el-table
          :data="personChargeList.data"
          style="width: 100%;margin-left: 12px;"
        >
          <el-table-column label="排名" width="50">
            <template slot-scope="{ $index }">{{ $index + 1 }}</template>
          </el-table-column>
          <el-table-column prop="real_name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="sale_count" label="首充数量" min-width="200">
            <template slot-scope="scope">
              <div class="rank">
                <div
                  class="num"
                  :style="{ width: setWidth(personChargeList.max) }"
                >
                  {{ scope.row.sale_save_count }}
                </div>
                <div class="program-content">
                  <div
                    class="box"
                    :style="{
                      width: setWidthPersent(
                        scope.row.sale_save_count,
                        personChargeList.max
                      )
                    }"
                  >
                    <div class="program1"></div>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { staffRank } from "@/api/statistics.js";
import { companyRank } from "@/api/statistics";
export default {
  name: "companyStatistic",
  data() {
    return {
      companySallList: {
        loading: false,
        data: [],
        max: 0
      },
      companyChargeList: {
        loading: false,
        data: [],
        max: 0
      },
      personSallList: {
        loading: false,
        data: [],
        max: 0
      },
      personChargeList: {
        loading: false,
        data: [],
        max: 0
      }
    };
  },
  watch: {},
  computed: {},
  methods: {
    getCompanySallList() {
      const param = {
        limit: 10,
        page: 1,
        type: 1
      };
      this.companySallList.loading = true;
      companyRank(param)
        .then(res => {
          this.companySallList.data = res.data.list;
          this.companySallList.total = res.data.count;
          this.companySallList.loading = false;
          this.companySallList.data.forEach(item => {
            if (item.sale_count > this.companySallList.max) {
              this.companySallList.max = item.sale_count;
            }
          });
        })
        .catch(e => {
          this.$message.error(e);
          this.companySallList.loading = false;
        });
    },
    getCompanyChargeList() {
      const param = {
        limit: 10,
        page: 1,
        type: 2
      };
      this.companyChargeList.loading = true;
      companyRank(param)
        .then(res => {
          this.companyChargeList.loading = false;
          this.companyChargeList.data = res.data.list;
          this.companyChargeList.total = res.data.count;
          this.companyChargeList.data.forEach(item => {
            if (item.sale_save_count > this.companyChargeList.max) {
              this.companyChargeList.max = item.sale_save_count;
            }
          });
        })
        .catch(e => {
          this.$message.error(e);
          this.companyChargeList.loading = false;
        });
    },
    getPersonSallList() {
      const param = {
        limit: 10,
        page: 1,
        type: 1
      };
      this.personSallList.loading = true;
      staffRank(param)
        .then(res => {
          this.personSallList.loading = false;
          this.personSallList.data = res.data.list;
          this.personSallList.total = res.data.count;
          this.personSallList.data.forEach(item => {
            if (item.sale_count > this.personSallList.max) {
              this.personSallList.max = item.sale_count;
            }
          });
        })
        .catch(e => {
          this.$message.error(e);
          this.personSallList.loading = false;
        });
    },
    getPersonChargeList() {
      const param = {
        limit: 10,
        page: 1,
        type: 2
      };
      this.personChargeList.loading = true;
      staffRank(param)
        .then(res => {
          this.personChargeList.loading = false;
          this.personChargeList.data = res.data.list;
          this.personChargeList.total = res.data.count;
          this.personChargeList.data.forEach(item => {
            if (item.sale_save_count > this.personChargeList.max) {
              this.personChargeList.max = item.sale_save_count;
            }
          });
        })
        .catch(e => {
          this.personChargeList.loading = false;
          this.$message.error(e);
        });
    },
    setWidth(num) {
      const str = num.toString();
      return str.length * 8 + "px";
    },
    setWidthPersent(sub, num) {
      if (num == 0) {
        return 0;
      } else {
        return ((sub / num) * 100).toFixed(2) + "%";
      }
    }
  },
  created() {},
  mounted() {
    this.getCompanyChargeList();
    this.getPersonSallList();
    this.getCompanySallList();
    this.getPersonChargeList();
  }
};
</script>

<style lang="scss" scoped>
.table_content {
  display: flex;
  background: #ffffff;
  padding: 12px;
  .table-item {
    width: 50%;
  }
}

::v-deep .el-table__cell {
  border: none !important;
}

.el-table::before {
  height: 0;
}

.table-header {
  height: 20px;
  border-left: 3px solid #0455da;
  line-height: 20px;
  font-size: 14px;
  padding-left: 4px;
  font-weight: bold;
}
.rank {
  display: flex;
  width: 100%;
}
.num {
  margin-right: 8px;
  line-height: 16px;
  text-align: right;
}

.program-content {
  position: relative;
  width: 60%;
  height: 16px;

  .box {
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
    height: 16px;
    .program {
      height: 16px;
      position: absolute;
      border-radius: 8px;
      animation: colorChange 1s forwards;
      background: #1c9eff;
    }
    .program1 {
      height: 16px;
      position: absolute;
      border-radius: 8px;
      animation: colorChange 1s forwards;
      background: #efae23;
    }
  }
}

@keyframes colorChange {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
.el-table {
  min-height: 400px;
}
</style>
